*{
    box-sizing: border-box;
}
html, body{
    margin: 0;
    padding: 0;
    color: #333;
    font-size: 14px;
}


html {
    --ant-primary-color: #1890ff;
    --ant-primary-color-hover: #40a9ff;
    --ant-primary-color-active: #096dd9;
    --ant-primary-color-outline: rgba(24, 144, 255, .2);
    --ant-primary-1: #e6f7ff;
    --ant-primary-2: #bae7ff;
    --ant-primary-3: #91d5ff;
    --ant-primary-4: #69c0ff;
    --ant-primary-5: #40a9ff;
    --ant-primary-6: #1890ff;
    --ant-primary-7: #096dd9;
    --ant-primary-color-deprecated-pure: ;
    --ant-primary-color-deprecated-l-35: #cbe6ff;
    --ant-primary-color-deprecated-l-20: #7ec1ff;
    --ant-primary-color-deprecated-t-20: #46a6ff;
    --ant-primary-color-deprecated-t-50: #8cc8ff;
    --ant-primary-color-deprecated-f-12: rgba(24, 144, 255, .12);
    --ant-primary-color-active-deprecated-f-30: rgba(230, 247, 255, .3);
    --ant-primary-color-active-deprecated-d-02: #dcf4ff;
    --ant-success-color: #52c41a;
    --ant-success-color-hover: #73d13d;
    --ant-success-color-active: #389e0d;
    --ant-success-color-outline: rgba(82, 196, 26, .2);
    --ant-success-color-deprecated-bg: #f6ffed;
    --ant-success-color-deprecated-border: #b7eb8f;
    --ant-error-color: #ff4d4f;
    --ant-error-color-hover: #ff7875;
    --ant-error-color-active: #d9363e;
    --ant-error-color-outline: rgba(255, 77, 79, .2);
    --ant-error-color-deprecated-bg: #fff2f0;
    --ant-error-color-deprecated-border: #ffccc7;
    --ant-warning-color: #faad14;
    --ant-warning-color-hover: #ffc53d;
    --ant-warning-color-active: #d48806;
    --ant-warning-color-outline: rgba(250, 173, 20, .2);
    --ant-warning-color-deprecated-bg: #fffbe6;
    --ant-warning-color-deprecated-border: #ffe58f;
    --ant-info-color: #1890ff;
    --ant-info-color-deprecated-bg: #e6f7ff;
    --ant-info-color-deprecated-border: #91d5ff;
}

.h-100 {
    height: 100%;
}
.w-100 {
    width: 100%;
}

.h-vh {
    height: 100vh;
}
.w-vw {
    width: 100vw;
}


.overflow{overflow:hidden;}
.pull-left{float:left;}
.pull-right{float:right;}
.f-12{font-size:12px;}
.f-14{font-size:14px;}
.f-16{font-size:16px;}
.f-18{font-size:18px;}
.f-20{font-size:20px;}
.bold{font-weight:bold;}
.m-l-5{margin-left:5px;}
.m-l-8{margin-left:8px;}
.m-l-10{margin-left:10px;}
.m-l-15{margin-left:15px;}
.m-l-20{margin-left:20px;}
.m-l-30{margin-left:30px;}
.m-t-5{margin-top:5px;}
.m-t-8{margin-top:8px;}
.m-t-10{margin-top:10px;}
.m-t-15{margin-top:15px;}
.m-t-20{margin-top:20px !important;}
.m-t-30{margin-top:30px !important;}
.m-t-50{margin-top:50px !important;}
.m-t-100{margin-top:100px !important;}
.p-l-r{padding-left:$space;padding-right:$space;}
.p-l{padding-left:$space;}
.p-r{padding-right:$space;}
.p-l-15{padding-left:$space;}
.p-r-15{padding-right:$space;}


.text-left{text-align:left !important;}
.text-center{text-align:center !important;}
.text-justify{text-align:justify !important;}
.text-right{text-align:right !important;}
.font-bold{font-weight:bold;}
.underline{text-decoration:underline;}
.w-100{width:100% !important;}
.h-100{height:100% !important;}
.block{display:block;}
.overflow{overflow:hidden;}
.relative{position:relative;}
.absolute{position:absolute;}

.flex{display: flex;}
.flex-1{flex: 1;}
.flex-align-items-center{
    display: flex;
    align-items: center;
}

.ellipsis {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.ellipsis-2 {
    overflow: hidden;
    text-overflow: ellipsis;
    display: box;
    white-space: normal!important;
    word-wrap: break-word;
    line-clamp: 2;
    box-orient: vertical
}

.pointer{cursor: pointer;}

.page-w{
    width: $page-width;
}

.color-forbidden{
    color: #F56C6C;
}
.color-fff{color: #fff;}
.color-999{color: #999;}
.color-666{color: #666;}
.color-333{color: #333;}


.el-message-box {
    max-width: 80%;
}

@media screen and (max-device-width:$mediaCriticalWidth) {
    .el-dialog {
        width: 90%;
    }
}